<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MonkeyCMS</title>
<link type="text/css" rel="stylesheet" href="statics/css/monkey.css"/>
<link type="text/css" rel="stylesheet" href="statics/css/frame.css"/>
<script type="text/javascript" src="statics/js/jquery.min.js"></script>
<script type="text/javascript" src="statics/js/prettify.js"></script>
<script type="text/javascript" src="statics/js/monkey.js"></script>

</head>

<body>
<!--page_header-->
<div class="page_header">
	<h3>信息提示框</h3>
	<p>通用信息提示框样式，共有提示、成功、警告、等待等七种提示框。（本组件使用了 <code>.iconfont</code> 组件，请保证页面引用了相应代码）</p>
</div>
<!--/page_header-->

<!--page_main-->
<div class="page_main">

	<!--信息-->
		<h4>信息</h4>
		<!--示例-->
		<div class="u_tipbox u_tipbox_message">
		    <div class="u_tipbox_icon">
		        <i class="iconfont" title="提示">&#xf05a;</i>
		    </div>
		    <div class="u_tipbox_content">
		        <h3 class="u_tipbox_title">提示标题</h3>
		        <p class="u_tipbox_explain">完提示标题的说明。</p>
		        <p class="u_tipbox_explain"><a href="#">相关链接</a> | <a href="#">相关链接</a></p>
		    </div>
		</div>
		<!--/示例-->

		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_tipbox u_tipbox_message"&gt;
  &lt;div class="u_tipbox_icon"&gt;
    &lt;i class="iconfont" title="提示"&gt;&amp;#xf05a;&lt;/i&gt;
  &lt;/div&gt;
  &lt;div class="u_tipbox_content"&gt;
    &lt;h3 class="u_tipbox_title"&gt;提示标题&lt;/h3&gt;
    &lt;p class="u_tipbox_explain"&gt;完提示标题的说明。&lt;/p&gt;
    &lt;p class="u_tipbox_explain"&gt;&lt;a href="#"&gt;相关链接&lt;/a&gt; | &lt;a href="#"&gt;相关链接&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->
		<!--/信息-->

		<!--出错-->
		<h4>出错</h4>
		<!--示例-->
		<div class="u_tipbox u_tipbox_error">
		    <div class="u_tipbox_icon">
		        <i class="iconfont" title="出错">&#xf057;</i>
		    </div>
		    <div class="u_tipbox_content">
		        <h3 class="u_tipbox_title">错误标题</h3>
		        <p class="u_tipbox_explain">错误标题的说明。</p>
		        <p class="u_tipbox_explain"><a href="#">相关链接</a> | <a href="#">相关链接</a></p>
		    </div>
		</div>
		<!--/示例-->

		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_tipbox u_tipbox_error"&gt;
  &lt;div class="u_tipbox_icon"&gt;
    &lt;i class="iconfont" title="出错"&gt;&amp;#xf057;&lt;/i&gt;
  &lt;/div&gt;
  &lt;div class="u_tipbox_content"&gt;
    &lt;h3 class="u_tipbox_title"&gt;错误标题&lt;/h3&gt;
    &lt;p class="u_tipbox_explain"&gt;错误标题的说明。&lt;/p&gt;
    &lt;p class="u_tipbox_explain"&gt;&lt;a href="#"&gt;相关链接&lt;/a&gt; | &lt;a href="#"&gt;相关链接&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->
		<!--/出错-->

		<!--警告-->
		<h4>警告</h4>
		<!--示例-->
		<div class="u_tipbox u_tipbox_warning">
		    <div class="u_tipbox_icon">
		        <i class="iconfont" title="出错">&#xf06a;</i>
		    </div>
		    <div class="u_tipbox_content">
		        <h3 class="u_tipbox_title">错误标题</h3>
		        <p class="u_tipbox_explain">错误标题的说明。</p>
		        <p class="u_tipbox_explain"><a href="#">相关链接</a> | <a href="#">相关链接</a></p>
		    </div>
		</div>
		<!--/示例-->

		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_tipbox u_tipbox_warning"&gt;
  &lt;div class="u_tipbox_icon"&gt;
    &lt;i class="iconfont" title="警告"&gt;&amp;#xf06a;&lt;/i&gt;
  &lt;/div&gt;
  &lt;div class="u_tipbox_content"&gt;
    &lt;h3 class="u_tipbox_title"&gt;警告标题&lt;/h3&gt;
    &lt;p class="u_tipbox_explain"&gt;警告标题的说明。&lt;/p&gt;
    &lt;p class="u_tipbox_explain"&gt;&lt;a href="#"&gt;相关链接&lt;/a&gt; | &lt;a href="#"&gt;相关链接&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->
		<!--/警告-->

		<!--成功-->
		<h4>成功</h4>
		<!--示例-->
		<div class="u_tipbox u_tipbox_success">
		    <div class="u_tipbox_icon">
		        <i class="iconfont" title="成功">&#xf058;</i>
		    </div>
		    <div class="u_tipbox_content">
		        <h3 class="u_tipbox_title">成功标题</h3>
		        <p class="u_tipbox_explain">成功标题的说明。</p>
		        <p class="u_tipbox_explain"><a href="#">相关链接</a> | <a href="#">相关链接</a></p>
		    </div>
		</div>
		<!--/示例-->

		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_tipbox u_tipbox_success"&gt;
  &lt;div class="u_tipbox_icon"&gt;
    &lt;i class="iconfont" title="成功"&gt;&amp;#xf058;&lt;/i&gt;
  &lt;/div&gt;
  &lt;div class="u_tipbox_content"&gt;
    &lt;h3 class="u_tipbox_title"&gt;成功标题&lt;/h3&gt;
    &lt;p class="u_tipbox_explain"&gt;成功标题的说明。&lt;/p&gt;
    &lt;p class="u_tipbox_explain"&gt;&lt;a href="#"&gt;相关链接&lt;/a&gt; | &lt;a href="#"&gt;相关链接&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->
		<!--/成功-->

		<!--阻止-->
		<h4>阻止</h4>
		<!--示例-->
		<div class="u_tipbox u_tipbox_stop">
		    <div class="u_tipbox_icon">
		        <i class="iconfont" title="阻止">&#xf058;</i>
		    </div>
		    <div class="u_tipbox_content">
		        <h3 class="u_tipbox_title">阻止标题</h3>
		        <p class="u_tipbox_explain">阻止标题的说明。</p>
		        <p class="u_tipbox_explain"><a href="#">相关链接</a> | <a href="#">相关链接</a></p>
		    </div>
		</div>
		<!--/示例-->

		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_tipbox u_tipbox_stop"&gt;
  &lt;div class="u_tipbox_icon"&gt;
    &lt;i class="iconfont" title="阻止"&gt;&amp;#xf058;&lt;/i&gt;
  &lt;/div&gt;
  &lt;div class="u_tipbox_content"&gt;
    &lt;h3 class="u_tipbox_title"&gt;阻止标题&lt;/h3&gt;
    &lt;p class="u_tipbox_explain"&gt;阻止标题的说明。&lt;/p&gt;
    &lt;p class="u_tipbox_explain"&gt;&lt;a href="#"&gt;相关链接&lt;/a&gt; | &lt;a href="#"&gt;相关链接&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->
		<!--/阻止-->

		<!--疑问-->
		<h4>疑问</h4>
		<!--示例-->
		<div class="u_tipbox u_tipbox_question">
		    <div class="u_tipbox_icon">
		        <i class="iconfont" title="疑问">&#xf059;</i>
		    </div>
		    <div class="u_tipbox_content">
		        <h3 class="u_tipbox_title">疑问标题</h3>
		        <p class="u_tipbox_explain">疑问标题的说明。</p>
		        <p class="u_tipbox_explain"><a href="#">相关链接</a> | <a href="#">相关链接</a></p>
		    </div>
		</div>
		<!--/示例-->

		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_tipbox u_tipbox_question"&gt;
  &lt;div class="u_tipbox_icon"&gt;
    &lt;i class="iconfont" title="疑问"&gt;&amp;#xf059;&lt;/i&gt;
  &lt;/div&gt;
  &lt;div class="u_tipbox_content"&gt;
    &lt;h3 class="u_tipbox_title"&gt;疑问标题&lt;/h3&gt;
    &lt;p class="u_tipbox_explain"&gt;疑问标题的说明。&lt;/p&gt;
    &lt;p class="u_tipbox_explain"&gt;&lt;a href="#"&gt;相关链接&lt;/a&gt; | &lt;a href="#"&gt;相关链接&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->
		<!--/疑问-->

		<!--等待-->
		<h4>等待</h4>
		<!--示例-->
		<div class="u_tipbox u_tipbox_wait">
		    <div class="u_tipbox_icon">
		        <i class="iconfont" title="等待">&#xf110;</i>
		    </div>
		    <div class="u_tipbox_content">
		        <h3 class="u_tipbox_title">等待标题</h3>
		        <p class="u_tipbox_explain">等待标题的说明。</p>
		        <p class="u_tipbox_explain"><a href="#">相关链接</a> | <a href="#">相关链接</a></p>
		    </div>
		</div>
		<!--/示例-->

		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_tipbox u_tipbox_wait"&gt;
  &lt;div class="u_tipbox_icon"&gt;
    &lt;i class="iconfont" title="等待"&gt;&amp;#xf110;&lt;/i&gt;
  &lt;/div&gt;
  &lt;div class="u_tipbox_content"&gt;
    &lt;h3 class="u_tipbox_title"&gt;等待标题&lt;/h3&gt;
    &lt;p class="u_tipbox_explain"&gt;等待标题的说明。&lt;/p&gt;
    &lt;p class="u_tipbox_explain"&gt;&lt;a href="#"&gt;相关链接&lt;/a&gt; | &lt;a href="#"&gt;相关链接&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->
		<!--/等待-->

		<!--空白的提示框-->
		<h4>空白的提示框</h4>
		<!--示例-->
		<div class="u_tipbox u_tipbox_white u_tipbox_message">
		    <div class="u_tipbox_icon">
		        <i class="iconfont" title="提示">&#xf05a;</i>
		    </div>
		    <div class="u_tipbox_content">
		        <h3 class="u_tipbox_title">提示标题</h3>
		        <p class="u_tipbox_explain">提示标题的说明。</p>
		        <p class="u_tipbox_explain"><a href="#">相关链接</a> | <a href="#">相关链接</a></p>
		    </div>
		</div>
		<!--/示例-->

		<h5>代码：</h5>
		<!--代码-->
		<pre class="prettyprint linenums">
&lt;div class="u_tipbox u_tipbox__white u_tipbox_message"&gt;
  &lt;div class="u_tipbox_icon"&gt;
    &lt;i class="iconfont" title="提示"&gt;&amp;#xf05a;&lt;/i&gt;
  &lt;/div&gt;
  &lt;div class="u_tipbox_content"&gt;
    &lt;h3 class="u_tipbox_title"&gt;提示标题&lt;/h3&gt;
    &lt;p class="u_tipbox_explain"&gt;提示标题的说明。&lt;/p&gt;
    &lt;p class="u_tipbox_explain"&gt;&lt;a href="#"&gt;相关链接&lt;/a&gt; | &lt;a href="#"&gt;相关链接&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
		<!--/代码-->
		<!--/空白的提示框-->

</div>
<!--/page_main-->
</body>
</html>